{template 'common/header'}
<!-- 活动选择标签 -->
<ul id="myTab" class="nav nav-tabs">
    <li class="active">
        <a href="#new-activity" data-toggle="tab">
            创建活动
        </a>
    </li>
    <li>
        <a href="#" data-toggle="tab">
            活动列表
        </a>
    </li>

</ul>

<div id="myTabContent" class="tab-content">
    <!--  创建活动面板 -->

    <div class="tab-pane fade in active" id="new-activity">

        <!--  活动提示 -->
        <div class="panel panel-default">
            <div class="panel-heading" style=" background-color: #eaeaea;">
                <h4 class="panel-title">
                    活动提示
                </h4>
            </div>
            <div class="panel-body">
                当你创建一个新活动后，以前参与过往期活动的会员又可以重新参与新的活动。往期活动的数据不作为此次活动参考数据。
            </div>
        </div>

        <br>

        <!--  活动设置 -->
        <div class="panel panel-default">
            <div class="panel-heading"  style=" background-color: #eaeaea;">
                <h4 class="panel-title">
                    活动设置
                </h4>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 col-md-2   control-label">是否关注</label>
                    <div class="col-sm-9 col-xs-12">
                        <label class="radio-inline">
                            <input type="radio" name="subscribe" value="0" {php if($reply['subscribe'] == 0) echo 'checked';}>必须关注</label>
                        <label class="radio-inline" style="margin-left:30px">
                            <input type="radio" name="subscribe" value="1" {php if($reply['subscribe'] == 1) echo 'checked';}>无需关注</label>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 col-md-2   control-label">活动名称</label>
                    <div class="col-sm-6 col-xs-9">
                        <input type="text" id="title" name="activity_name" class="form-control" value="{$reply['activity_name']}">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 col-md-2   control-label">活动时间</label>
                    <div class="col-sm-9 col-xs-12">
                        {php echo tpl_form_field_daterange('activity_time', array('starttime'=>date('Y-m-d H:i',$reply['starttime']),'endtime'=>date('Y-m-d H:i',$reply['endtime'])), true);}
                    </div>
                </div>
            </div>

        </div>
        <br>

        <!--  助力设置 -->
        <div class="panel panel-default">
            <div class="panel-heading"  style=" background-color: #eaeaea;">
                <h4 class="panel-title">
                    助力步距
                </h4>
            </div>
            <div class="panel-body " id="InputsWrapper">
                <div  class="form-group" id="0">

                    <div class="col-sm-3 col-xs-1 ">
                        <div class="col-sm-6 h5">当进度在</div>
                        <div class="input-group ">
                            <input type="number" id='text1' class="form-control">
                            <span class="input-group-addon">米</span>
                        </div>
                    </div>

                    <div class="col-sm-2 col-xs-1 ">
                        <div class="col-sm-4 h5" style=" margin-left: -30px;">至</div>
                        <div class="input-group">
                            <input type="number" id='text2' class="form-control">
                            <span class="input-group-addon">米</span>
                        </div>
                    </div>

                    <div class="col-sm-3 col-xs-1 " style="padding:0">
                        <div class="col-sm-6 h5"  style="padding:0">时，每次步距</div>
                        <div class="input-group">
                            <input type="number" id='text3' class="form-control">
                            <span class="input-group-addon">米</span>
                        </div>
                    </div>

                    <div class="col-sm-2 col-xs-1 ">
                        <div class="col-sm-4 h5" style=" margin-left: -20px;">至</div>
                        <div class="input-group">
                            <input type="number" id='text4' class="form-control">
                            <span class="input-group-addon">米</span>
                        </div>
                    </div>
                    <div class=" btn btn-info add_btn" id="AddMoreFileBox" >添加区间</div>
                </div>


            </div>

        </div>

        <br>

        <!--  奖品设置 -->
        <div class="panel panel-default">
            <div class="panel-heading"  style=" background-color: #eaeaea;">
                <h4 class="panel-title">
                    奖品设置
                </h4>
            </div>
            <div class="panel-body">

                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 col-md-2   control-label">奖品数量</label>
                    <div class="col-sm-6 col-xs-9">
                        <input type="number"  name="price_number" class="form-control" value="{$reply['price_number']}">
                    </div>
                </div>
                <!--奖品类型部分-->
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 col-md-2   control-label">奖品类型</label>
                    <div class="col-sm-9 col-xs-12">
                        <label class="radio-inline">
                            <input type="radio" id="shiwu" name="prize_type" value="1" {php if($reply['prize_type'] == 0) echo 'checked';}>实物</label>
                        <label class="radio-inline" style="margin-left:30px">
                            <input type="radio" id="hongbao" name="prize_type" value="2" {php if($reply['prize_type'] == 1) echo 'checked';}>红包</label>
                        <label class="radio-inline" style="margin-left:30px">
                            <input type="radio" id="jifen" name="prize_type" value="3" {php if($reply['prize_type'] == 2) echo 'checked';}>积分</label>
                    </div>
                </div>
                <!--红包额度部分-->
                <div class="form-group" id="hongbaoedu">
                    <label class="col-xs-12 col-sm-3 col-md-2   control-label">红包额度</label>
                    <div class="col-sm-9 col-xs-12" style="padding:0">
                        <div class="col-sm-3 col-xs-1 ">
                            <div class="input-group" style="padding-left: 0">
                                <input type="number"  class="form-control" name="min_red" value="$reply['min_red']">
                                <span class="input-group-addon">分</span>
                            </div>
                        </div>

                        <div class="col-sm-3 col-xs-1 " >
                            <div class="col-sm-3 h5"  style="padding:0">至</div>
                            <div class="input-group">
                                <input type="number"  class="form-control" name="max_red" value="$reply['max_red']">
                                <span class="input-group-addon">分</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!--文字图片部分-->
                <div class="form-group" id="title_img">
                    <label class="col-xs-12 col-sm-3 col-md-2   control-label">文字图片</label>
                    <div class="col-sm-6 col-xs-12">
                        {php echo tpl_form_field_image('title_image',$reply['title_image']);}
                    </div>
                </div>

                <!--奖品图片部分-->
                <div class="form-group" >
                    <label class="col-xs-12 col-sm-3 col-md-2   control-label">奖品图片</label>
                    <div class="col-sm-6 col-xs-12">
                        {php echo tpl_form_field_image('award_image',$reply['award_image']);}
                    </div>
                </div>


                <!--区域限制部分-->
                <div class="form-group" >
                    <label class="col-xs-12 col-sm-3 col-md-2   control-label">区域限制</label>
                    <div class="col-sm-9 col-xs-12">
                        <label class="radio-inline">
                            <input type="radio"  name="address_type" value="0" {php if($reply['address_type'] == 0) echo 'checked';}>不限制</label>
                        <label class="radio-inline" style="margin-left:30px">
                            <input type="radio"  name="address_type" value="1" {php if($reply['address_type'] == 1) echo 'checked';}>限制</label>

                    </div>
                </div>

                <!--背景图片部分-->
                <div class="form-group" >
                    <label class="col-xs-12 col-sm-3 col-md-2   control-label">背景风格</label>
                    <div class="col-sm-3 col-xs-12">
                        <select class="form-control" id="style_change" name="bg_style">
                            <option value="0" selected = "selected">活泼</option>
                            <option value="1">沉稳</option>
                        </select>
                    </div>

                </div>
                <div class="form-group" >
                    <label class="col-xs-12 col-sm-3 col-md-2   control-label">背景预览</label>
                    <div class="col-sm-3 col-xs-12">

                        <div class="col-sm-11" style="height:250px;background-color: gray"></div>

                    </div>


                </div>

                <!--奖品类型切换-->
                <script>
                    $(document).ready(function () {
                        $("#hongbaoedu").css('display','none');
                    });

                    $("input:radio[name='prize_type']").change(function (){
                        var strId="";
                        if(this.checked){
                            strId =this.id;
                            if(strId=='hongbao'){
                                $("#hongbaoedu").css('display','');
                                $("#jiangping_img").css('display','none');
                            }else {
                                $("#hongbaoedu").css('display','none');
                                $("#jiangping_img").css('display','');
                            }
                        }

                    });
                    $(document).ready(function() {

                    });
                </script>
            </div>

        </div>
        <br>

        <!--  分享设置 -->
        <div class="panel panel-default">
            <div class="panel-heading"  style=" background-color: #eaeaea;">
                <h4 class="panel-title">
                    分享设置
                </h4>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 col-md-2   control-label">分享标题</label>
                    <div class="col-sm-6 col-xs-9">
                        <input type="text" name="repeat_title" class="form-control" value="{$reply['repeat_title']}">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 col-md-2   control-label">分享描述</label>
                    <div class="col-sm-6 col-xs-9">
                        <input type="text" name="repeat_description" class="form-control" value="{$reply['repeat_description']}">
                    </div>
                </div>

                <div class="form-group" >
                    <label class="col-xs-12 col-sm-3 col-md-2   control-label">分享图片</label>
                    <div class="col-sm-6 col-xs-12">
                        {php echo tpl_form_field_image('repeat_image',$reply['repeat_image']);}
                    </div>
                </div>

            </div>
        </div>

        <!--  活动规则 -->
        <div class="panel panel-default">
            <div class="panel-heading"  style=" background-color: #eaeaea;">
                <h4 class="panel-title">
                    活动规则
                </h4>
            </div>
            <div class="panel-body">
                {php echo tpl_ueditor('content',$reply['content']);}
            </div>
        </div>

        <!--  奖品说明 -->
        <div class="panel panel-default">
            <div class="panel-heading"  style=" background-color: #eaeaea;">
                <h4 class="panel-title">
                    奖品说明
                </h4>
            </div>
            <div class="panel-body">

                {php echo tpl_ueditor('explain',$reply['explain']);}

            </div>
        </div>

        <script>



            $(document).ready(function() {

                var MaxInputs       = 500; //maximum input boxes allowed
                var InputsWrapper   = $("#InputsWrapper"); //Input boxes wrapper ID
                var AddButton       = $("#AddMoreFileBox"); //Add button ID

                x = $(InputsWrapper).children('div').length; //initlal text box count
                var FieldCount=$(InputsWrapper).children('div').length; //to keep track of text box added

                $(AddButton).click(function (e)  //on add input button click
                {
                    if(x <= MaxInputs) //max input box allowed
                    {
                        FieldCount++; //text box added increment
                        //add input box

                        var add_formgroup = "<div id=\""+ FieldCount +"\" class=\"form-group\" > <div class=\"col-sm-3 col-xs-1 \">\n" +
                            "                            <div class=\"col-sm-6 h5\">当进度在</div>\n" +
                            "                            <div class=\"input-group \">\n" +
                            "                                <input type=\"number\" id='text1' class=\"form-control\">\n" +
                            "                                <span class=\"input-group-addon\">米</span>\n" +
                            "                            </div>\n" +
                            "                        </div>\n" +
                            "\n" +
                            "                        <div class=\"col-sm-2 col-xs-1 \">\n" +
                            "                            <div class=\"col-sm-4 h5\" style=\" margin-left: -30px;\">至</div>\n" +
                            "                            <div class=\"input-group\">\n" +
                            "                                <input type=\"number\" id='text2' class=\"form-control\">\n" +
                            "                                <span class=\"input-group-addon\">米</span>\n" +
                            "                            </div>\n" +
                            "                        </div>\n" +
                            "\n" +
                            "                        <div class=\"col-sm-3 col-xs-1 \" style=\"padding:0\">\n" +
                            "                            <div class=\"col-sm-6 h5\"  style=\"padding:0\">时，每次步距</div>\n" +
                            "                            <div class=\"input-group\">\n" +
                            "                                <input type=\"number\" id='text3' class=\"form-control\">\n" +
                            "                                <span class=\"input-group-addon\">米</span>\n" +
                            "                            </div>\n" +
                            "                        </div>\n" +
                            "\n" +
                            "                        <div class=\"col-sm-2 col-xs-1 \">\n" +
                            "                            <div class=\"col-sm-4 h5\" style=\" margin-left: -20px;\">至</div>\n" +
                            "                            <div class=\"input-group\">\n" +
                            "                                <input type=\"number\" id='text4' class=\"form-control\">\n" +
                            "                                <span class=\"input-group-addon\">米</span>\n" +
                            "                            </div>\n" +
                            "                        </div>\n" +
                            "                        <div class=\"btn btn-info del_btn\"  onclick=deletetr("+FieldCount+")>删除区间</div>\n" +
                            "                    </div>";


                        $(InputsWrapper).append(add_formgroup);
                        x++; //text box increment
                    }
                    return false;
                });
            });

            $(document).ready(function () {
                $("#InputsWrapper").find(".input-group").mouseleave(function () {

                    var data = new Array();
                    var y = 0;
                    for (var i = 1; i <= x; i++) {
                        if ($('#' + i + ' #text1').val() != null && $('#' + i + ' #text1').val() != null) {
                            if ($('#' + i + ' #text2').val() != null && $('#' + i + ' #text2').val() != null) {
                                if ($('#' + i + ' #text3').val() != null && $('#' + i + ' #text3').val() != null) {
                                    if ($('#' + i + ' #text4').val() != null && $('#' + i + ' #text4').val() != null) {
                                        data[y] = $('#' + i + ' #text1').val();
                                        y++;
                                        data[y] = $('#' + i + ' #text2').val();
                                        y++;
                                        data[y] = $('#' + i + ' #text3').val();
                                        y++;
                                        data[y] = $('#' + i + ' #text4').val();
                                        y++;
                                    }
                                }
                            }
                        }
                    }
                    //SaveBasic(data);
                    console.log(data);
                })
            });


            function deletetr(i){
                $("#"+i).remove();
            }

        </script>

    </div>
</div>
{template 'common/footer'}